<!--  -->
<template>
    <div class="tenants">
        <Nav title="商家入驻">
            <template v-slot:left>
                <span class="back" @click="$router.back()"></span>
            </template>
        </Nav>
        <div class="tenants_con">
            <div class="tenants_conhead">
                <h2 class="f-15 ml-10">商家入驻须知</h2>
                <div class="pt-18 color-gray">
                    <p>1.认真填好个人资料</p>
                    <p class="pt-10">2.以下信息均为必填项</p>
                    <p class="pt-10">3.姓名、号码具有真实性</p>
                </div>
            </div>
            <div class="tenants_con_item show_public flex flex-column justify-center">
                <span class="f-15 ml-10">店主姓名</span>
                <cube-input v-model="username" placeholder="输入您的姓名" clearable></cube-input>
                <cube-validator
                    ref="username"
                    v-model="valid[0]"
                    :model="username"
                    :rules="commonRules"
                ></cube-validator>
            </div>
            <div class="tenants_con_item show_public flex flex-column justify-center">
                <span class="f-15 ml-10">手机号</span>
                <cube-input v-model="mobile" placeholder="输入您的手机号" clearable type="number"></cube-input>
                <cube-validator ref="mobile" v-model="valid[1]" :model="mobile" :rules="rules"></cube-validator>
            </div>
            <div class="tenants_con_item show_public flex flex-column justify-center" @click="showAsyncPicker">
                <span class="f-15 ml-10">所在地</span>
                <div class="f-14 color-gray mt-12 ml-10">{{area||'选择您的所在地'}}</div>
                <cube-validator ref="area" v-model="valid[2]" :model="area" :rules="commonRules"></cube-validator>
            </div>
            <div class="tenants_con_item show_public flex flex-column justify-center">
                <span class="f-15 ml-10">详细地址</span>
                <cube-input v-model="detailArea" placeholder="输入您的详细地址" clearable></cube-input>
                <cube-validator
                    ref="detailArea"
                    v-model="valid[3]"
                    :model="detailArea"
                    :rules="commonRules"
                ></cube-validator>
            </div>
            <div class="tenants_con_item show_public flex flex-column justify-center">
                <span class="f-15 ml-10">商户登录用户名</span>
                <cube-input v-model="accountName" placeholder="输入您的姓名" clearable></cube-input>
                <cube-validator
                    ref="accountName"
                    v-model="valid[4]"
                    :model="accountName"
                    :rules="commonRules"
                ></cube-validator>
            </div>
            <div class="tenants_con_item show_public flex flex-column justify-center">
                <span class="f-15 ml-10">商户登录密码</span>
                <cube-input
                    class="password"
                    v-model="password"
                    placeholder="输入您的密码"
                    type="password"
                    clearable
                    :eye="{open:false}"
                ></cube-input>
                <cube-validator
                    ref="password"
                    v-model="valid[5]"
                    :model="password"
                    :rules="commonRules"
                ></cube-validator>
            </div>
            <div class="tenants_con_item show_public flex flex-column justify-center">
                <span class="f-15 ml-10">店铺名</span>
                <cube-input v-model="shopName" placeholder="输入您的店铺名" clearable></cube-input>
                <cube-validator
                    ref="shopName"
                    v-model="valid[6]"
                    :model="shopName"
                    :rules="commonRules"
                ></cube-validator>
            </div>
            <div class="tenants_con_introduce show_public flex flex-column justify-center">
                <span class="f-15 ml-10">店铺介绍</span>
                <cube-textarea v-model="introduce" placeholder="关于你店铺的介绍" :maxlength="maxlength"></cube-textarea>
            </div>
        </div>
        <div class="tenants_foot">
            <button class="tenants_btn btn_public" @click="submit">申请提交/等待审核</button>
        </div>
    </div>
</template>

<script>
import Nav from "../../components/Nav";
import { area} from "../../api/api";
export default {
  components: { Nav },
  data() {
    return {
      introduce: "",
      maxlength: 100,
      username: "",
      mobile: "",
      area: "",
      detailArea: "",
      accountName: "",
      password: "",
      shopName: "",
      valid: [
        undefined,
        undefined,
        undefined,
        undefined,
        undefined,
        undefined,
        undefined
      ],
      rules: {
        required: true,
        type: "tel"
      },
      asyncPicker: null, //地址选择对象
      commonRules: {
        required: true
      },
      areaList: [], //区域列表
      cityList: [], //城市列表
      provinceList: [], //省市列表
      asyncSelectedIndex: [0, 0, 0] //地址选择索引
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 显示地址选择
    showAsyncPicker() {
     
      this.asyncPicker.show();
      let a = document.querySelectorAll(".cube-picker-wheel-item");
      a.forEach(item => {
        item.style.fontSize = "16px";
      });
    },
    // 选中地址
    selectHandle(selectedVal, selectedIndex, selectedText) {
      this.asyncSelectedIndex = selectedIndex;
      this.area = selectedText.join("/");
    },
    //取消地址选择
    cancelHandle() {},
    //提交
    submit() {
      const username = this.$refs.username.validate();
      const mobile = this.$refs.mobile.validate();
      const area = this.$refs.area.validate();
      const detailArea = this.$refs.detailArea.validate();
      const accountName = this.$refs.accountName.validate();
      const password = this.$refs.password.validate();
      const shopName = this.$refs.shopName.validate();
      Promise.all([
        username,
        mobile,
        area,
        detailArea,
        accountName,
        password,
        shopName
      ]).then(() => {
        if (this.valid.every(item => item)) {
      
        }
      });
    }
  },
  created() {},
  mounted() {
    this.asyncPicker = this.$createCascadePicker({
      title: "区域选择",
      data: this.provinceList,
      selectedIndex: this.asyncSelectedIndex.slice(),
      onSelect: this.selectHandle,
      onCancel: this.cancelHandle,
      onChange: this.asyncChangeHandle
    });
    area().then(({ data: { result } }) => {
      this.areaList = result.areaList;
      this.cityList = result.cityList;
      this.provinceList = result.provinceList;
      this.provinceList.forEach(province => {
        province.children = this.cityList[province.value];
        province.children.forEach(city => {
          city.children = this.areaList[city.value];
        });
      });
      this.asyncPicker.setData(this.provinceList, [0, 0, 0]);
    });
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin.less");
//@import url(); 引入公共css类
.tenants /deep/ .cube-validator-msg {
  text-indent: 10px;
}
input::-webkit-input-placeholder {
  color: #bcbcbc;
}
input:-ms-input-placeholder {
  // IE10+
  color: #bcbcbc;
}
input:-moz-placeholder {
  // Firefox4-18
  color: #bcbcbc;
}
input::-moz-placeholder {
  // Firefox19+
  color: #bcbcbc;
}
.tenants_conhead {
  margin: 8px 0 28px 30px;
}
.tenants_con_item {
  height: 80px;
  padding: 0 16px;
}
.tenants_con_item input,
.tenants_con_introduce .cube-textarea-wrapper {
  font-size: 13px;
  color: #333;
  margin-top: 15px;
}
.tenants_con_introduce {
  padding: 20px 16px;
}
.tenants_foot {
  margin: 39px 15px 47px;
}
</style>